<style scoped>
    @import '../styles/tasks.css';
</style>

<template>
    <div class="layout-content-main" id="tasks">
        <div class="tasks-table-tool">
            <Button type="primary">
                <Icon type="android-add"></Icon>
                新增
            </Button>
        </div>
        <Table border :columns="columns4" :data="data1" :size="tableSize" :stripe="showStripe"
               :height="fixedHeader ? 500 : ''" no-data-text="无数据"
               no-filtered-data-text="无符合条件的数据"></Table>

        <div style="margin: 10px;overflow: hidden">
            <div style="float: left;">
                <Page :total="100" show-sizer show-elevator></Page>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                tab0: true,
                tab1: true,
                tab2: true,
                tableSize: 'small',
                fixedHeader: true,
                showStripe: true,
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名2',
                        key: 'name'
                    },
                    {
                        title: '年龄2',
                        key: 'age'
                    },
                    {
                        title: '地址2',
                        key: 'address'
                    },
                    {
                        title: '操作2',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data1: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },

                ]
            }
        },
        methods: {
            handleTabRemove(name) {
                this['tab' + name] = false;
            },
            show(index){
                console.log(this.data1[index].name)
            }
        }

    }
</script>